<!DOCTYPE html>
<html>
    <head>
        <title>Issue 4542: Quotes Issue With JavaScript Function Calls Inside Inline Event Handlers</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="../../_common/testcase.css" type="text/css" rel="stylesheet">
        <style type="text/css">
            #sayHi {
                width: 75px;
                background-position: 5px 50%;
                background-repeat: no-repeat;
                text-align: right;
            }

            #output {
                display: none;
            }
        </style>
    </head>
    <body>
        <header>
            <h1><a href="http://code.google.com/p/fbug/issues/detail?id=4542">Issue 4542</a>: Quotes Issue With JavaScript Function Calls Inside Inline Event Handlers</h1>
        </header>
        <div>
            <section id="content">
                <button id="sayHi" onclick="var output = document.getElementById(output'); output.style.display = 'block'; output.innerHTML = Hi there, tester!&quot;" style="background-image: url(firebug.png');">
                    Say hi
                </button>
                <section id="output">
                </section>
            </section>
            <section id="description">
                <h3>Steps to reproduce</h3>
                <ol>
                    <li>Open Firebug</li>
                    <li>Switch to the HTML panel</li>
                    <li>Inspect the <em>Say hi</em> button above</li>
                    <li>Click the value of the <code>id</code> attribute of the <em>Say hi</em> button to start inline editing</li>
                    <li>
                        Enter a double quote (<code>&quot;</code>)<br/>
                        <span class="ok">&rArr; The inline editor should jump to the <code>onclick</code> attribute</span>
                    </li>
                    <li>Click the value of the <code>onclick</code> attribute of the <em>Say hi</em> button to start inline editing</li>
                    <li>Move the text cursor between the opening bracket and <code>output</code> of <code>getElementById(output&#39;)</code></li>
                    <li>
                        Enter a single quote (<code>&#39;</code>)<br/>
                        <span class="ok">&rArr; The single quote is entered into the input field</span>
                    </li>
                    <li>Move the text cursor before the <code>H</code> of <code>Hi</code></li>
                    <li>
                        Enter a double quote (<code>&quot;</code>)<br/>
                        <span class="ok">&rArr; The double quote is entered into the input field</span>
                    </li>
                    <li>
                        Click the <em>Say hi</em> button above<br/>
                        <span class="ok">&rArr; <code>Hi there, tester!</code> should be shown below the button</span>
                    </li>
                    <li>Click the value of the <code>style</code> attribute of the <em>Say hi</em> button to start inline editing</li>
                    <li>Move the text cursor after the opening bracket</li>
                    <li>
                        Enter a single quote (<code>&#39;</code>)<br/>
                        <span class="ok">&rArr; The single quote is entered into the input field</span><br/>
                        <span class="ok">&rArr; The background of the <code>Say hi</code> button changes to the Firebug logo</span>
                    </li>
                </ol>
                <h3>Expected Result</h3>
                <ul>
                    <li>Event handler attributes like <code>onclick</code> and <code>title</code>, <code>alt</code> and <code>style</code> should allow entering quotes</li>
                    <li>On all other attributes the inline editor should jump to the next field</li>
                </ul>
            </section>
            <footer>Sebastian Zartner, sebastianzartner@gmail.com</footer>
        </div>
    </body>
</html>